<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>

</head>

<body>
<div id="app">
    <el-container style="height: 600px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1']">
                <el-menu-item-group>
                    <el-menu-item @click="accountLogin">商品管理</el-menu-item>
                    <el-menu-item @click="smsLogin">用户管理</el-menu-item>
                    <el-menu-item
                            onclick="window.location.href = 'http://localhost:8080/denglu.html'">退出</el-menu-item>
                </el-menu-item-group>
            </el-menu>
        </el-aside>

        <el-container>
            <el-main>
                <el-table v-if="isActive" :data="tableData" stripe>
                    <el-table-column prop="names" label="名称" width="140">
                    </el-table-column>
                    <el-table-column prop="prices" label="价格" width="120">
                    </el-table-column>
                    <el-table-column prop="numbers" label="剩余数量" width="120">
                    </el-table-column>
                    <el-table-column prop="sellers" label="所属卖家" width="140">
                    </el-table-column>
                    <el-table-column prop="xiajia" label="操作" width="140">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="deleteRow(scope.$index, tableData)"
                                       type="text">下架</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table v-else :data="tableData2" stripe border>
                    <el-table-column prop="name" label="用户" width="200">
                    </el-table-column>
                    <el-table-column prop="operate" label="操作" width="200">
                        <slot slot-scope="scope">
                            <el-button @click.native.prevent="tongyi(scope.$index,tableData2,scope.row)"
                                       type="text">同意</el-button>
                            <el-button @click.native.prevent="jujue(scope.$index,tableData2,scope.row)"
                                       type="text">拒绝</el-button>
                        </slot>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>


    </el-container>
</div>



</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    new Vue({
        el: '#app',
        mounted() {
            //当页面加载完成发送异步请求获取数据
            this.select1();
        },
        data() {
            return {
                isActive: true,
                tableData: [],
                tableData2: []
            }
        },
        methods: {
            accountLogin() { // 商品管理
                this.isActive = true
                this.select1();
            },
            smsLogin() { // 用户管理
                this.isActive = false
                this.select2();
            },

            select1() {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/selectShowAll"
                }).then(function (resp) {
                    _this.tableData = resp.data;
                    console.log(resp.data)
                })
            },
            select2() {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/selectZhuce"
                }).then(function (resp) {
                    _this.tableData2 = resp.data;
                })
            },
            tongyi(index, tableData2, row) {
                axios({
                    method: "get",
                    url: "http://localhost:8080/agreeApply?name=" + row.name + "&password=" + row.password
                }).then(function (resp) {
                })
                tableData2.splice(index, 1);

            },
            jujue(index, tableData2, row) {
                axios({
                    method: "get",
                    url: "http://localhost:8080/deleteZhuce?name=" + row.name + "&password=" + row.password
                }).then(function (resp) {
                })
                tableData2.splice(index, 1);
            },

            deleteRow(index, rows) {
                console.log(rows[index].sellers);
                console.log(rows[index].names);
                axios({
                    method: "get",
                    url: "http://localhost:8080/deleteShowNames?names=" + rows[index].names + "&sellers=" + rows[index].sellers
                }).then(function (resp) {
                    rows.splice(index, 1);
                })
            }


        }
    })
</script>

</html>